$(function(){
    var index=0;//定位
    var f;
    ctime();
    function ctime(){//定时器
        f=setInterval(function(){
        
        if(index==$(".box-img").length-1){
            index=0;
            $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");
            $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
        }
        else{
            index++;
            $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");
            $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
        }

    },4000)
    }


    $(".box-left").click(function(){
        clearInterval(f);
        if(index==0){
            index=$(".box-img").length-1;
            $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");
            $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
            ctime();
        }
        else{
            index--;
            $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");
            $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
            ctime();
        }
        // window.open('http://localhost:9200/#/tunnels/list');
        
        
    })


    $(".box-right").click(function(){
        clearInterval(f);
        if(index===$(".box-img").length-1){
            index=0;
            $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");//索引
            $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
            ctime();
        }
        else{
            index++;
            $(".box-img").css("opacity","0");
            $(".box-img").eq(index).css("opacity","1");//索引
            $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
            
            ctime();
        }
    })

    $(".botton").click(function(){
        clearInterval(f);
        var indexx=$(this).index();
        index=indexx;
        $(".box-img").css("opacity","0");
        $(".box-img").eq(index).css("opacity","1");//索引
        $(".botton").css("background-color","#ccc")
        $(".botton").eq(index).css("background-color","#0095ff")
        ctime();
    })




    $(".box-img img").click(function(){
        if(index==0){
            window.open('http://localhost:9200/#/tunnels/list');}
        if(index==1){
            window.open('https://stackblitz.com/edit/vitejs-vite-wfc38v?file=index.html&terminal=dev');}
        if(index==2){
            window.open('https://play.kotlinlang.org/#eyJ2ZXJzaW9uIjoiMS43LjIwIiwicGxhdGZvcm0iOiJqYXZhIiwiYXJncyI6IiIsIm5vbmVNYXJrZXJzIjp0cnVlLCJ0aGVtZSI6ImlkZWEiLCJjb2RlIjoiLyoqXG4gKiBZb3UgY2FuIGVkaXQsIHJ1biwgYW5kIHNoYXJlIHRoaXMgY29kZS5cbiAqIHBsYXkua290bGlubGFuZy5vcmdcbiAqL1xuZnVuIG1haW4oKSB7XG4gICAgcHJpbnRsbihcIkhlbGxvLCB3b3JsZCEhIVwiKVxufSJ9');}
        if(index==3){
            window.open('http://localhost:8080/')
        }
        if(index==4){
            window.open('https://stackblitz.com/edit/vitejs-vite-wfc38v?file=index.html&terminal=dev')
        }
    })




})



$(".item-header").click(function(){
    $(".accordion-item").removeClass("active");
        $(this).parent().addClass("active");
        $(".icon").text("+");
        $(this).children(".icon").text("-");
 });

 document.getElementById("create-header_button").onclick=function(){
    document.getElementById("create").style.display="block";
}
document.getElementById("buttonp_break").onclick=function(){
    document.getElementById("create").style.display="none";
}
var title = document.querySelector('.create-title');
title.addEventListener('mousedown',function(e){
    var x = e.pageX - create.offsetLeft;
    var y = e.pageY - create.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e) {
        if((e.pageX - x) > 250 && (e.pageY - y) > 105){
            create.style.left = e.pageX - x + 'px';
            create.style.top = e.pageY - y + 'px';
        }
    }
    document.addEventListener('mouseup',function() {
        this.removeEventListener('mousemove',move);
    })
});